<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>答题结束</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .main{
      box-sizing: border-box;
      background-image: url('./imgs/endbg.png');
      background-size: cover;
      height: 100vh;
      min-height: 201.3333vw;
      padding:8vw 14.1333vw;
    }
    .end-main-body {
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .login-title {
      margin-bottom: 5.3333vw;
      height: 16vw;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 4.8vw;
      color: #333333;
      line-height: 1.7;
    }

    .end-topImg {
      width: 60vw;
      height: 40vw;
    }

    .smile {
      width: 13.0667vw;
      height: 13.0667vw;
      /* margin-top: 10vw; */
      margin-bottom: 4vw;
    }

    .endText {
      font-family: Microsoft YaHei;
      color: #393939;
      font-size: 4vw;
      /* margin-bottom: 10vw; */
    }

    .confirmBtn {
      width: 100%;
      height: 11.7333vw;
      background: #42ba7a;
      border-radius: 1.3333vw;
      line-height: 10.6667vw;
      font-family: Microsoft YaHei;
      color: #ffffff;
      font-size: 4.5333vw;
      text-align: center;
    }

    .score-content {
      margin: 0 auto;
      width: 43.4667vw;
      height: 46.9333vw;
      background-image: url('./imgs/endtongguo.png');
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 500;
      font-size: 3.7333vw;
      color: #FFFFFF;
    }

    .score-content #result {
      display: inline-block;
      height: 24.5333vw;
      font-size: 13.3333vw;
      color: #FDFFFF;
    }
    .tips {
      font-size: 4.8vw;
      line-height: 1.6;
      margin-bottom: 8vw;
      text-align: center;
    }

    .tipList {
      width: 100%;
      margin-bottom: 8vw;
    }

    .tipList li {
      font-size: 4.2667vw;
      color: #333333;
      display: flex;
      align-items: center;
      margin-bottom: 5.4vw;
      position: relative;
    }

    .tipList li img {
      margin-right: 4vw;
      width: 9.6vw;
      height: 9.6vw;
    }
    .tipList li::after{
      content: "";
      position: absolute;
      top: 9.4vw;
      left: 4.5333vw;
      height: 5.6vw;
      background-color: #DBDBDB;
      width: .5333vw;
    }
    .tipList li:last-child::after{
      display: none;
    }
    .no-pass-tips {
      position: absolute;
      width: 60vw;
      font-size: 3.7333vw;
      color: #0A9048;
      bottom: -4vw;
      left: 13.3333vw;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="login-title">信息系统运维管理-2024年9月第一批考试考试成绩</div>
    <div class="end-main-body">
      <div class="score-content">
        <p>得分</p>
        <p id="result">56</p>
      </div>
      <div class="tips">
        <p>很遗憾<span style="font-size: 28px;margin: 0 2vw;">李晓月</span>考试未通过</p>
        <p>请继续努力</p>
      </div>
      <ul class="tipList"">
        <li>
          <img src=" ./imgs/end1.png" />
      <span>考试未通过</span>
      </li>
      <li>
        <img src="./imgs/end2.png" />
        <span>向培训老师申请二次开考</span>
      </li>
      <li style="position: relative;">
        <img src="./imgs/end3.png" />
        <span>等待开考通知</span>
        <p class="no-pass-tips">未发生特殊原因二次考试为次月开考</p>
      </li>
      <li>
        <img src="./imgs/end4.png" />
        <span>正常考试</span>
      </li>
      </ul>
      <div class="confirmBtn">确认</div>
    </div>
  </div>
</body>
<script></script>

</html>